```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搭建本地MCP服务器 | Cursor高效连接指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .code-block {
            background-color: #1e293b;
            border-left: 4px solid #6366f1;
        }
        .hover-scale {
            transition: transform 0.3s ease;
        }
        .hover-scale:hover {
            transform: translateY(-3px);
        }
        .step-card:hover .step-icon {
            transform: rotate(10deg) scale(1.1);
        }
        .step-icon {
            transition: all 0.3s ease;
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(139, 92, 246, 0.2);
            z-index: -1;
            transform: scaleY(1.1);
            transition: height 0.3s ease;
        }
        .highlight:hover::after {
            height: 50%;
        }
        .mermaid {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 serif">
                        搭建自己的<span class="highlight">MCP服务器</span>并连接Cursor
                    </h1>
                    <p class="text-xl opacity-90 mb-8">
                        让AI编程助手更加高效稳定，完全掌控响应速度和数据隐私
                    </p>
                    <div class="flex space-x-4">
                        <a href="#setup" class="bg-white text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-medium hover-scale shadow-md transition-all">
                            <i class="fas fa-rocket mr-2"></i>立即开始
                        </a>
                        <a href="#benefits" class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-medium hover-scale transition-all">
                            <i class="fas fa-star mr-2"></i>了解优势
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 md:pl-10">
                    <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-2 shadow-2xl border border-white border-opacity-20">
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752651729868-39244959-a50a-479a-9c66-dd0ff61e7ffd.png" 
                             alt="MCP服务器架构图" 
                             class="rounded-lg shadow-md w-full">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section id="benefits" class="py-16 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm font-medium mb-4">
                    <i class="fas fa-bolt mr-1"></i> 优势特性
                </span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 serif">为什么需要本地MCP服务器？</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    本地MCP服务器为您提供完全可控的AI编程环境，大幅提升开发体验
                </p>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-all">
                    <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-tachometer-alt text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">极速响应</h3>
                    <p class="text-gray-600">
                        本地运行消除了网络延迟，让AI建议瞬间呈现，不再等待远程服务器响应
                    </p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-all">
                    <div class="w-12 h-12 bg-pink-100 text-pink-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-shield-alt text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">数据隐私</h3>
                    <p class="text-gray-600">
                        敏感代码无需离开您的本地环境，完全掌控数据流向，保护知识产权
                    </p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-all">
                    <div class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-sliders-h text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">完全自定义</h3>
                    <p class="text-gray-600">
                        自由配置模型参数、提示模板和缓存策略，打造个性化的编程助手
                    </p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-all">
                    <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-plug text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">稳定连接</h3>
                    <p class="text-gray-600">
                        告别网络波动导致的连接中断，本地服务器确保稳定可靠的AI支持
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-16 bg-gray-50 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4 serif">MCP服务器工作原理</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    了解MCP服务器如何桥接Cursor与语言模型
                </p>
            </div>
            <div class="mermaid">
                sequenceDiagram
                    participant Cursor
                    participant MCP服务器
                    participant AI模型
                    Cursor->>MCP服务器: 发送代码/请求
                    MCP服务器->>AI模型: 转发处理请求
                    AI模型->>MCP服务器: 返回生成结果
                    MCP服务器->>Cursor: 返回格式化响应
            </div>
        </div>
    </section>

    <!-- Setup Guide -->
    <section id="setup" class="py-16 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm font-medium mb-4">
                    <i class="fas fa-cogs mr-1"></i> 搭建指南
                </span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 serif">五步搭建本地MCP服务器</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    只需简单几步，即可拥有专属的AI编程助手服务
                </p>
            </div>

            <div class="space-y-8">
                <!-- Step 1 -->
                <div class="step-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all">
                    <div class="md:flex">
                        <div class="md:w-1/3 bg-purple-50 p-8 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 bg-purple-600 text-white rounded-full flex items-center justify-center mb-4 step-icon">
                                <span class="text-2xl font-bold">1</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800 text-center">环境准备</h3>
                        </div>
                        <div class="md:w-2/3 p-8">
                            <h4 class="text-lg font-semibold text-gray-800 mb-3">安装Python与必要依赖</h4>
                            <p class="text-gray-600 mb-4">确保Python 3.8+环境，并安装必要库：</p>
                            <div class="code-block text-gray-200 p-4 rounded-lg font-mono overflow-x-auto">
                                <p>pip install fastapi uvicorn pydantic python-dotenv openai</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="step-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all">
                    <div class="md:flex">
                        <div class="md:w-1/3 bg-indigo-50 p-8 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 bg-indigo-600 text-white rounded-full flex items-center justify-center mb-4 step-icon">
                                <span class="text-2xl font-bold">2</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800 text-center">项目结构</h3>
                        </div>
                        <div class="md:w-2/3 p-8">
                            <h4 class="text-lg font-semibold text-gray-800 mb-3">创建项目文件</h4>
                            <p class="text-gray-600 mb-4">设置项目目录结构：</p>
                            <div class="code-block text-gray-200 p-4 rounded-lg font-mono overflow-x-auto">
                                <p>mcp_server/<br>├── .env<br>├── main.py<br>├── models.py<br>└── config.py</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="step-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all">
                    <div class="md:flex">
                        <div class="md:w-1/3 bg-blue-50 p-8 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center mb-4 step-icon">
                                <span class="text-2xl font-bold">3</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800 text-center">代码实现</h3>
                        </div>
                        <div class="md:w-2/3 p-8">
                            <h4 class="text-lg font-semibold text-gray-800 mb-3">核心API开发</h4>
                            <p class="text-gray-600 mb-4">在main.py中实现核心逻辑：</p>
                            <div class="code-block text-gray-200 p-4 rounded-lg font-mono overflow-x-auto text-sm">
                                <p>from fastapi import FastAPI<br>import uvicorn<br>import openai<br><br>app = FastAPI()<br><br>@app.post("/v1/chat/completions")<br>async def chat_completion(request: dict):<br>    response = openai.ChatCompletion.create(<br>        model=request.get("model"),<br>        messages=request.get("messages")<br>    )<br>    return response<br><br>if __name__ == "__main__":<br>    uvicorn.run(app, host="127.0.0.1", port=8000)</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 4 -->
                <div class="step-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all">
                    <div class="md:flex">
                        <div class="md:w-1/3 bg-green-50 p-8 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 bg-green-600 text-white rounded-full flex items-center justify-center mb-4 step-icon">
                                <span class="text-2xl font-bold">4</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800 text-center">启动服务</h3>
                        </div>
                        <div class="md:w-2/3 p-8">
                            <h4 class="text-lg font-semibold text-gray-800 mb-3">运行MCP服务器</h4>
                            <p class="text-gray-600 mb-4">启动本地服务：</p>
                            <div class="code-block text-gray-200 p-4 rounded-lg font-mono overflow-x-auto">
                                <p>python main.py</p>
                            </div>
                            <p class="text-gray-600 mt-4">验证服务正常运行：</p>
                            <div class="code-block text-gray-200 p-4 rounded-lg font-mono overflow-x-auto">
                                <p>curl -X POST "http://localhost:8000/v1/chat/completions" \<br>  -H "Content-Type: application/json" \<br>  -d '{"messages": [{"role": "user", "content": "你好"}]}'</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 5 -->
                <div class="step-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all">
                    <div class="md:flex">
                        <div class="md:w-1/3 bg-yellow-50 p-8 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 bg-yellow-600 text-white rounded-full flex items-center justify-center mb-4 step-icon">
                                <span class="text-2xl font-bold">5</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800 text-center">连接Cursor</h3>
                        </div>
                        <div class="md:w-2/3 p-8">
                            <h4 class="text-lg font-semibold text-gray-800 mb-3">配置Cursor使用本地MCP</h4>
                            <p class="text-gray-600 mb-4">在Cursor设置中:</p>
                            <ol class="list-decimal pl-5 space-y-2 text-gray-600">
                                <li>打开Cursor设置</li>
                                <li>选择"AI"选项卡</li>
                                <li>找到"自定义MCP端点"</li>
                                <li>输入<code class="bg-gray-100 px-1 rounded">http://localhost:8000/v1/chat/completions</code></li>
                                <li>保存设置</li>
                            </ol>
                            <p class="text-gray-600 mt-4">现在Cursor将使用您本地的MCP服务器!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advanced Features -->
    <section class="py-16 bg-gray-50 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm font-medium mb-4">
                    <i class="fas fa-magic mr-1"></i> 高级功能
                </span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 serif">解锁MCP服务器的全部潜力</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    通过这些进阶技巧，打造更强大的编程助手
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-layer-group text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">多模型支持</h3>
                    <p class="text-gray-600 mb-4">
                        配置不同AI模型，根据任务自动切换最适合的模型
                    </p>
                    <div class="code-block text-gray-200 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                        <p>MODEL_MAPPINGS = {<br>  "gpt-3.5-turbo": "gpt-3.5-turbo",<br>  "gpt-4": "gpt-4"<br>}</p>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-bolt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">请求缓存</h3>
                    <p class="text-gray-600 mb-4">
                        缓存常见请求，减少API调用次数，提高响应速度
                    </p>
                    <div class="code-block text-gray-200 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                        <p>@lru_cache(maxsize=100)<br>def get_cached_response(model, messages):<br>  return openai.ChatCompletion.create(...)</p>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
                    <div class="text-green-600 mb-4">
                        <i class="fas fa-project-diagram text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">项目上下文</h3>
                    <p class="text-gray-600 mb-4">
                        基于不同项目提供针对性建议，保持上下文一致性
                    </p>
                    <div class="code-block text-gray-200 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                        <p>project_contexts = {<br>  "project1": {<br>    "language": "Python",<br>    "framework": "Django"<br>  }<br>}</p>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-tasks text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">自定义提示</h3>
                    <p class="text-gray-600 mb-4">
                        预设常用提示模板，一键生成代码文档或评审建议
                    </p>
                    <div class="code-block text-gray-200 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                        <p>PROMPT_TEMPLATES = {<br>  "docstring": "为函数添加文档字符串..."<br>}</p>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
                    <div class="text-red-600 mb-4">
                        <i class="fas fa-chart-line text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">性能监控</h3>
                    <p class="text-gray-600 mb-4">
                        实时监控内存使用和响应时间，确保服务器稳定运行
                    </p>
                    <div class="code-block text-gray-200 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                        <p>def monitor_memory():<br>  while True:<br>    print(psutil.Process().memory_info())</p>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
                    <div class="text-yellow-600 mb-4">
                        <i class="fas fa-user-cog text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">权限管理</h3>
                    <p class="text-gray-600 mb-4">
                        添加API密钥验证，控制服务器访问权限
                    </p>
                    <div class="code-block text-gray-200 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                        <p>@app.middleware("http")<br>async def check_auth(request, call_next):<br>  if not validate_token(request):<br>    raise HTTPException(401)</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm font-medium mb-4">
                    <i class="fas fa-question-circle mr-1"></i> 常见问题
                </span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 serif">需要更多帮助？</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    以下是开发者常遇到的问题与解决方案
                </p>
            </div>

            <div class="space-y-4 max-w-3xl mx-auto">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold text-gray-800 mb-2 flex items-center">
                        <i class="fas fa-question text-purple-500 mr-3"></i>
                        连接Cursor时出现超时错误
                    </h3>
                    <p class="text-gray-600 pl-9">
                        检查MCP服务器是否正在运行，并确保端口未被防火墙阻止。可以在终端运行<code class="bg-gray-100 px-1 rounded">curl http://localhost:8000/health</code>测试服务是否可达。
                    </p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold text-gray-800 mb-2 flex items-center">
                        <i class="fas fa-question text-purple-500 mr-3"></i>
                        如何修改默认AI模型？
                    </h3>
                    <p class="text-gray-600 pl-9">
                        在config.py文件中修改DEFAULT_MODEL变量，或在发送请求时指定model参数。支持的模型取决于您的API密钥权限。
                    </p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold text-gray-800 mb-2 flex items-center">
                        <i class="fas fa-question text-purple-500 mr-3"></i>
                        服务器响应速度慢怎么办？
                    </h3>
                    <p class="text-gray-600 pl-9">
                        1. 启用请求缓存<br>
                        2. 增加Uvicorn工作线程数<br>
                        3. 检查网络连接<br>
                        4. 监控内存使用情况，避免资源耗尽
                    </p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold text-gray-800 mb-2 flex items-center">
                        <i class="fas fa-question text-purple-500 mr-3"></i>
                        能否限制访问权限？
                    </h3>
                    <p class="text-gray-600 pl-9">
                        可以添加API密钥验证中间件，或配置防火墙只允许本地IP访问。建议在生产环境中添加身份验证。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-16 bg-purple-600 text-white px-4">
        <div class="container mx-auto max-w-3xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6 serif">准备好提升您的编程体验了吗？</h2>
            <p class="text-xl opacity-90 mb-8">
                立即搭建本地MCP服务器，享受高效稳定的AI编程助手
            </p>
            <a href="#setup" class="inline-block bg-white text-purple-600 hover:bg-purple-50 px-8 py-4 rounded-lg font-bold text-lg hover-scale shadow-xl transition-all">
                <i class="fas fa-terminal mr-2"></i>开始搭建
            </a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 动态高亮导航
        const sections = document.querySelectorAll('section');
        window.addEventListener('scroll', function() {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
                    current = section.getAttribute('id');
                }
            });
        });
    </script>
</body>
</html>
```